* { padding: 0; margin: 0; user-select: none; }
body { background-color: #0063B1CC; width: 450px; overflow: hidden; }

.tag {
  background-color: #467496;
  color: #fff;
  padding: 8px;
  flex: none;
  display: inline-block;
  margin-right: 8px;
  margin-top: 8px;
  cursor: pointer;
  position: relative;
}
.tag.selected, .tag:active {
  background-color: #92ADC2;
}
.tag.selected:hover, .tag:active:hover {
  border: 0;
  padding: 8px;
}
.tag.selected::after, .tag.active::after {
  content: '√';
  color: #ffff99;
  position: absolute;
  right: -4px;
  bottom: -2px;
}
.tag:hover {
  border: 2px solid #92ADC2;
  padding: 6px;
}
.btn.disabled {
  background-color: #666666;
  color: #CCC;
  cursor: not-allowed;
}
.btn {
  background-color: #467496;
  color: #fff;
  padding: 8px 48px;
  flex: none;
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
}
.btn.disabled:hover {
  border: 0;
  padding: 8px 48px;
}
.btn:hover {
  border: 2px solid #92ADC2;
  padding: 6px 46px;
}
.btn.active:hover {
  background-color: #666666;
}
.btn:active {
  background-color: #92ADC2;
}

.tip {
  color: #92ADC2;
  padding: 8px;
  flex: none;
  font-size: 14px;
}
.label {
  color: #EEEEEE;
  padding: 8px;
  flex: none;
  font-size: 14px;
}
.link {
  color: #012B4C;
  cursor: pointer;
}
.link:hover {
  color: #92ADC2;
}
.icon-btn {
  width: 18px;
  height: 18px;
  font-size: 16px;
  color: #FFF;
  line-height: 18px;
  text-align: center;
}
.icon-btn:hover {
  background-color: #92ADC2;
}

input[type=checkbox] {
  -webkit-appearance: none;
  width: 44px;
  height: 20px;
  border-radius: 12px;
  border: 2px solid #CCCCCC;
  outline: none;
  position: relative;
  vertical-align: middle;
}
input[type=checkbox]:hover {
  border: 2px solid #FFFFFF;
}
input[type=checkbox]:disabled {
  border: 2px solid #666666;
  background-color: #666666;
}
input[type=checkbox]:checked {
  background-color: #9F5900;
}
input[type=checkbox]::before {
  content: ' ';
  background-color: #CCCCCC;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 5px;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
}
input[type=checkbox]:hover::before {
  background-color: #FFFFFF;
}
input[type=checkbox]:checked::before {
  left: 27px;
}
input[type=checkbox]:disabled::before {
  background-color: #666666;
}

input[type=text],input[type=number],input[type=password],textarea {
  border-radius: 4px;
  border: 2px solid #CCCCCC;
  outline: none;
  vertical-align: middle;
}